<template>
  <div class="AnchorAudit">
    <el-card>
      <h3><span class="tag"></span> 主播申请审核</h3>
      <div class="searchBox">
        <span class="txt">提交时间：</span>
        <el-date-picker
          size="small"
          v-model="timeArr"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="timeOptions"
          value-format="yyyy-MM-dd"
          @change="focusA"
        >
        </el-date-picker>
        <span class="margin"></span>
        <span class="txt">ID：</span>
        <el-input v-model="userId" clearable size="small"></el-input>
        <span class="margin"></span>
        <span class="txt">审核序号：</span>
        <el-input v-model="id" clearable size="small"></el-input>
        <span class="margin"></span>
        <!-- <span class="txt">审核分类：</span>
        <el-select
          class="channelselect"
          v-model="type"
          placeholder="请选分类"
          size="small"
        >
          <el-option label="头像" value="1"> </el-option>
          <el-option label="相册" value="2"> </el-option>
        </el-select> -->
        <el-button
          class="btn"
          icon="el-icon-search"
          size="small"
          @click="search"
          >查询搜索</el-button
        >
      </div>
      <div class="typeBox">
        <div>
          <el-radio-group
            @change="search"
            v-model="status"
            size="small"
            fill="#7b94d8"
          >
            <el-radio-button label="0">未审核</el-radio-button>
            <el-radio-button label="1">已审核</el-radio-button>
          </el-radio-group>
          <el-select
            v-show="status == 1"
            style="margin-left: 10px"
            class="channelselect"
            v-model="type"
            placeholder="请选分类"
            size="small"
            @change="search"
          >
            <el-option label="全部" value=""> </el-option>
            <el-option label="已通过" value="1"> </el-option>
            <el-option label="未通过" value="2"> </el-option>
          </el-select>
        </div>
        <!-- <div class="right">
          <el-button icon="el-icon-paperclip" size="small">导出EXCEL</el-button>
          <el-button
            type="success"
            plain
            size="small"
            v-if="auto == 1"
            @click="auto = 2"
            >人工审核（已开启）</el-button
          >
          <el-button
            type="info"
            plain
            size="small"
            v-if="auto == 2"
            @click="auto = 1"
            >人工审核（已关闭）</el-button
          >
        </div> -->
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%; margin-top: 10px"
        :header-cell-style="{ background: '#f5f7fa' }"
        @selection-change="handleSelectionChange"
      >
        <template slot="empty">
          <el-empty :image-size="200"></el-empty>
        </template>
        <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
        <el-table-column prop="id" label="序号"> </el-table-column>
        <el-table-column prop="createTime" label="提交时间"> </el-table-column>
        <el-table-column
          v-if="status == 1"
          key="applyReviewTime"
          prop="applyReviewTime"
          label="审核时间"
        >
        </el-table-column>
        <el-table-column prop="userId" label="用户ID"> </el-table-column>
        <el-table-column prop="nickname" label="用户昵称"> </el-table-column>
        <el-table-column prop="sex" label="用户性别">
          <template slot-scope="scope">
            {{ scope.row.sex == 1 ? "男" : "女" }}
          </template>
        </el-table-column>
        <el-table-column prop="rate" label="分成比例">
          <template slot-scope="scope">
            {{ scope.row.rate * 100 + "%" }}
          </template>
        </el-table-column>
        <el-table-column prop="realName" label="真实姓名"> </el-table-column>
        <el-table-column prop="idNumber" label="实名身份证"> </el-table-column>
        <el-table-column
          prop="status"
          v-if="status == 1"
          key="123"
          label="审核结果"
        >
          <template slot-scope="scope">
            {{
              scope.row.status == 0
                ? "待审核"
                : scope.row.status == 1
                ? "已通过"
                : "已驳回"
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="reason"
          v-if="status == 1"
          key="1234"
          label="审核原因"
        >
        </el-table-column>
        <el-table-column prop="address" key="12345" label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              v-if="scope.row.status == 0"
              plain
              @click="pass(scope.row)"
              >审 核</el-button
            >
            <el-button
              type="warning"
              size="small"
              plain
              v-if="scope.row.status == 1"
              @click="operation(scope.row)"
              >修改分成比例</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <br />
      <!-- <el-button size="small" class="btn plcz">批量操作</el-button> -->
      <pagination
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getList"
      />
    </el-card>
    <el-dialog title="处理" :visible.sync="show" width="30%" center>
      <el-form label-position="right" label-width="80px" :model="form">
        <el-form-item label="处理">
          <el-radio-group v-model="form.status">
            <el-radio label="1">通过</el-radio>
            <el-radio label="2">驳回</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="form.status == 2" label="驳回原因">
          <el-input v-model="form.reason"></el-input>
        </el-form-item>
        <el-form-item v-if="form.status == 1" label="分成比例">
          <el-input style="width: 20%" v-model="form.rate"></el-input> %
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="show = false">取 消</el-button>
        <el-button size="small" class="btn" type="primary" @click="submit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog title="修改分成比例" :visible.sync="showA" width="30%" center>
      <el-form label-position="right" label-width="80px" :model="formA">
        <el-form-item label="分成比例">
          <el-input style="width: 20%" v-model="formA.rate"></el-input> %
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="showA = false">取 消</el-button>
        <el-button size="small" class="btn" type="primary" @click="submitA"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import {
  anchorapplyQueryList,
  anchorapplyApplyReview,
  anchorSetAnchorRate,
} from "@/api/AuditManagement";
export default {
  components: { Pagination },
  data() {
    return {
      loading: false,
      timeArr: [],
      startDate: "",
      endDate: "",
      userId: "",
      id: "",
      type: "",
      status: "0",
      tableData: [{ sd: 1 }, { cs: 2 }],
      total: 0,
      page: 1,
      pageSize: 10,
      multipleSelection: [],
      show: false,
      showA: false,
      auto: 1, //人工审核1开启2关闭
      form: { id: "", status: "1", reason: "", rate: "" },
      formA: { userId: "", rate: "" },
      timeOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  methods: {
    //选着时间
    focusA(time) {
      if (!this.timeArr) {
        this.timeArr = [];
      }
      this.startDate = this.timeArr[0];
      this.endDate = this.timeArr[1];
    },
    //选择表格
    handleSelectionChange(value) {
      this.multipleSelection = value;
      console.log(this.multipleSelection);
    },
    //处理不通过
    operation(obj) {
      this.formA.userId = obj.userId;
      this.formA.rate = obj.rate * 100;
      this.showA = true;
    },
    //通过
    pass(obj) {
      this.form = { id: obj.id, status: "1", reason: "", rate: "" };
      this.show = true;
    },
    async submit() {
      if (this.form.status == 1) {
        // if(this.form.rate)
        var reg = new RegExp("^(\\d|[1-9]\\d|100)$");
        if (!reg.test(this.form.rate)) {
          return this.$message.error("请输入0-100的整数！");
        } else {
          this.form.rate = this.form.rate * 0.01;
        }
      }
      const res = await anchorapplyApplyReview(this.form);
      if (res.code == 0) {
        this.$message.success("操作成功！");
        this.getList();
        this.show = false;
      }
    },
    async submitA() {
      var reg = new RegExp("^(\\d|[1-9]\\d|100)$");
      if (!reg.test(this.formA.rate)) {
        return this.$message.error("请输入0-100的整数！");
      }

      const res = await anchorSetAnchorRate({
        userId: this.formA.userId,
        rate: this.formA.rate * 0.01,
      });
      if (res.code == 0) {
        this.$message.success("操作成功！");
        this.getList();
        this.showA = false;
      }
    },
    async getList() {
      this.loading = true;
      const res = await anchorapplyQueryList({
        page: this.page,
        pageSize: this.pageSize,
        userId: this.userId,
        id: this.id,
        status: this.status,
        result: this.type,
        startTime: this.startDate,
        endTime: this.endDate,
      });
      this.loading = false;
      if (res.code == 0) {
        this.tableData = res.data.list;
        this.total = res.data.total;
      }
    },
    search() {
      this.page = 1;
      this.getList();
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style lang="less" scoped>
.AnchorAudit {
  padding: 20px;
  h3 {
    margin: 0 0;
    display: flex;
    align-items: center;
    .tag {
      display: inline-block;
      width: 5px;
      height: 18px;
      background-color: #7b94d8;
      margin-right: 10px;
    }
  }
  .searchBox {
    display: flex;
    align-items: center;
    margin: 20px 0;
    .margin {
      margin: 0 10px;
    }
    .txt {
      display: inline-block;
      height: 32px;
      background-color: #f5f7fa;
      line-height: 32px;
      padding-left: 10px;
      color: #9d9399;
      border-radius: 4px 0 0 4px;
      border: 1px solid #dcdfe6;
      border-right: none;
    }
    /deep/ .el-input__inner {
      border-radius: 0 4px 4px 0 !important;
    }
    .el-input {
      width: 200px;
    }
  }
  .typeBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .plcz {
    margin-left: 0 !important;
  }
}
</style>